<template>
  <view class="container">
    <view class="search-box">
      <view class="search-before-box"
            @tap="showSearchAfter"
            v-show="isShowSearchBefore">
        <view class="search-before-input">
          <view class="search-img">
            <image src="../../static/images/search.png"></image>
          </view>
          <view class="search-txt">搜索大学</view>
        </view>
      </view>
      <view class="search-after-box"
            v-show="isShowSearchAfter">
        <view class="search-after-input">
          <view class="search-img">
            <image src="../../static/images/search.png"></image>
          </view>
          <input :focus="isSearchFocus"
                 class="search-input"
                 placeholder="搜索大学"
                 placeholder-class="input-placeholder"
                 v-model="words"
                 @confirm="refresh" />
        </view>
        <view class="search-cancel"
              @tap="showSearchBefore">取消</view>
      </view>
    </view>
    <view class="list-box">
      <s-pull-scroll ref="pullScroll"
                     :back-top="true"
                     :pullDown="pullDown"
                     :pullUp="loadData"
                     :fixed="false">
        <view class="list-item-box"
              v-for="(item, index) in dataList"
              :key="index"
              @tap="goBatch(item.universityId)">
          <view class="list-item-label">{{item.universityName}}</view>
          <view class="list-item-arrow">
            <image src="../../static/images/arrow.png"></image>
          </view>
        </view>

        <view class="noHave"
              v-if="isShowHave">
          暂无数据
        </view>

      </s-pull-scroll>
    </view>
  </view>
</template>

<script>
import { http } from '../../utils'
import sPullScroll from '../../components/s-pull-scroll/index.vue'

export default {
  components: {
    sPullScroll
  },
  data () {
    return {
      isShowSearchBefore: true,
      isShowSearchAfter: false,
      isSearchFocus: false,
      params: {
        name: '',
        perPage: 10,
        curPage: 1
      },
      isShowHave: false,
      words: '',
      total: 0,
      max: 0,
      dataList: []
    };
  },
  methods: {
    refresh () {
      this.$nextTick(() => {
        this.$refs.pullScroll.refresh();
      });
    },
    pullDown (pullScroll) {
      // setTimeout(() => {
      //   this.loadData(pullScroll);
      // }, 200);

      this.max = 0;
      this.loadData = [];
      this.params.curPage = 1;
      this.getAllEPItem(false);
    },
    // loadData (pullScroll) {
    //   setTimeout(() => {
    //     this.params.curPage = pullScroll.page
    //     this.params.name = this.words

    //     http('/university/list',
    //       this.params, {
    //       hideLoading: false,
    //       hideMsg: true,
    //       method: 'POST'
    //     }).then(
    //       res => {
    //         //console.log(res);
    //         this.total = res.data.total;
    //         if (pullScroll.page == 1) {
    //           this.dataList = res.data.data.list;
    //         } else {
    //           this.dataList = this.dataList.concat(res.data.data.list);
    //         }
    //         if (this.dataList.length == res.data.data.total) {
    //           pullScroll.finish(true);
    //         } else {
    //           pullScroll.success();
    //         }
    //       }).catch(
    //         err => {
    //           console.error(err)
    //         })
    //   }, 500);
    // },
    loadData (pullScroll) {
      if (this.max >= this.total) {
        this.$refs.pullScroll.finish(this.max >= this.total);
        return;
      }
      this.params.curPage++;

      this.getAllEPItem(true);
    },
    getAllEPItem (loading) {
      this.params.name = this.words
      http('/university/list',
        this.params, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          this.total = res.data.data.total;
          const curList = res.data.data.list;
          if (loading) {
            this.max += 10;
            this.dataList = this.dataList.concat(curList);
          } else {
            this.max += 10;
            this.dataList = curList;
          }
          if (this.dataList.length == 0) {
            this.isShowHave = true
          } else {
            this.isShowHave = false
          }
          this.$refs.pullScroll.success()

        }).catch(
          err => {
            console.error(err)
          })
    },
    showSearchAfter () {
      this.isShowSearchBefore = false;
      this.isShowSearchAfter = true;
      this.isSearchFocus = true;
    },
    showSearchBefore () {
      this.isShowSearchBefore = true;
      this.isShowSearchAfter = false;
      this.isSearchFocus = false;
    },
    input: function (s) {
      this.words = s.value;
      this.params.name = this.words;
      this.refresh();
    },
    goBatch (id) {
      uni.navigateTo({
        url: '/pages/enrollment_plan_batch/enrollment_plan_batch?id=' + id
      })
    }
  },
  onLoad () {
    //this.fetchList(this.params)
    this.refresh();
  }
};
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}

.search-box {
  width: 750rpx;
  height: 100rpx;
  background-color: #5683ec;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-before-input {
  width: 702rpx;
  height: 64rpx;
  background-color: #ffffff;
  border: solid 2rpx #d7d6d6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 32rpx;
  margin-top: 20rpx;
}

.search-after-box {
  width: 100%;
  height: 88rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search-after-input {
  width: 600rpx;
  height: 64rpx;
  background-color: #ffffff;
  border: solid 2rpx #d7d6d6;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: 32rpx;
  padding-left: 20rpx;
  margin-top: 20rpx;
}

.input-placeholder {
  font-size: 24rpx;
  color: #999999;
}

.search-input {
  margin-left: 20rpx;
  height: 64rpx;
}

.search-cancel {
  font-size: 24rpx;
  color: #ffffff;
  margin-left: 10rpx;
  margin-top: 16rpx;
}

.search-txt {
  width: 120rpx;
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}

.search-img image {
  width: 33rpx;
  height: 33rpx;
  margin-top: 8rpx;
}

.list-box {
  background-color: #ffffff;
  width: 750rpx;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  font-size: 28rpx;
}

.list-item-box {
  width: 690rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  border-bottom: solid 1rpx #f5f5f5;
}

.list-item-arrow image {
  width: 20rpx;
  height: 20rpx;
}

.noHave {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 32rpx;
  height: 48rpx;
}
</style>
